<!-- 操作记录 -->
<template>
  <el-table :data="tableList.slice((pageNumber - 1) * pageSize, pageNumber * pageSize)" border class="table" :reserve-selection="true" v-if="tableList.length > 0">
    <el-table-column prop="user_type_name" label="用户类型" align="center"> </el-table-column>
    <el-table-column prop="action_user" label="用户id" align="center"> </el-table-column>
    <el-table-column prop="user_name" label="用户名" align="center" :formatter="handleFormatterUserName"> </el-table-column>
    <el-table-column prop="status_desc" label="描述" align="center"> </el-table-column>
    <el-table-column prop="action_note" label="备注" align="center"> </el-table-column>
    <el-table-column prop="log_time" label="创建时间" align="center" :formatter="(row: IActionLog) => handleVerifyFormatDate(row.log_time)"> </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination background @update:current-page="handleCurrentChange" @update:page-size="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :page-size="pageSize" :current-page="pageNumber" :page-sizes="[5, 10]" :total="total" :hide-on-single-page="true">
    </el-pagination>
  </div>
</template>

<script setup lang="ts">
import { handleVerifyFormatDate } from "@/utils/utils";
import type { IOrderAction } from "@/types/rentMachineManage/rentMachineOrderInfo";
import type { IActionLog } from "@/types/rentMachineManage/directPurchaseOrderInfo";

interface Props {
  tableList: IOrderAction[];
}
const { tableList } = defineProps<Props>();

const pageNumber = ref(1);
const pageSize = ref(5);
const total = computed(() => {
  return tableList.length;
});
watch(
  () => tableList.length,
  (length: number) => {
    if (length == 0) {
      handleInitData();
    }
  }
);
/* 初始化数据 */
function handleInitData() {
  pageNumber.value = 1;
  pageSize.value = 5;
}

/* 显示第几页 */
function handleCurrentChange(val: number) {
  pageNumber.value = val;
}

/* 每页显示几条 */
function handleSizeChange(val: number) {
  pageSize.value = val;
}

/* 格式化用户 */
function handleFormatterUserName(row: IActionLog) {
  /* user_type 0:后台用户，1:店铺，2：普通用户 */
  if (row.user_type === 0 && row.masterUser !== null) {
    return `${row.masterUser.mobile},${row.masterUser.nick_name}`;
  } else if (row.user_type === 1 && row.storeUser !== null) {
    return `${row.storeUser.contacts_mobile}`;
  } else if (row.user_type === 2 && row.user !== null) {
    return `${row.user.mobile}`;
  }
  return "";
}
</script>

<style lang="scss" scoped>
/* layout-布局 */
.el-col {
  border-radius: 4px;
}
</style>
